<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>主页面</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/static/css/special/default.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,700">
    <link rel="stylesheet" type="text/css" href="/static/css/special/chips_sp.css"/>
    <link rel="stylesheet" href="/static/css/special/style.min.css">
    <style type="text/css">
        html,body{
            width:100%;
            height:100%;
            overflow: hidden;
            margin:0px;
        }
    </style>
</head>
<body class="bg" style="position:relative;">
<div id="loading">
    <div class="flash"></div>
</div>
<canvas id="c" style=" position: absolute;top: 0;left: 0;background-color: black;position:absolute;z-index:0;width: 100%;height:100%;"></canvas>
<div id="wrapper" class="wrapper" >
    <iframe id="iframe" src="/special/region_static_show" style="width:100%;height:100%;border: 0px;padding: 0px;margin:0px;" onload="loading()"></iframe>
</div><!-- /wrapper -->

<button id="mm-menu-toggle" class="mm-menu-toggle">Toggle Menu</button>
<div class="title"><span>图形化展示</span></div>
<nav id="mm-menu" class="mm-menu">
    <div class="mm-menu__header">

    </div>
    <ul class="mm-menu__items">
        <li class="mm-menu__item">
            <a class="mm-menu__link" href="#" data-src="/special/region_static_show" data-title="区域评价">
                <span class="mm-menu__link-text"><i class="fa fa-square fa-fw"></i>区域评价</span>
            </a>
        </li>
        <li class="mm-menu__item">
            <a class="mm-menu__link" href="#" data-src="/special/station_static_show" data-title="岗位评价">
                <span class="mm-menu__link-text"><i class="fa fa-address-card fa-fw"></i> 岗位评价</span>
            </a>
        </li>
        <li class="mm-menu__item">
            <a class="mm-menu__link" href="#" data-src="/special/depart_static_show" data-title="单位评价">
                <span class="mm-menu__link-text"><i class="fa fa-building fa-fw"></i> 单位评价</span>
            </a>
        </li>
        <li class="mm-menu__item">
            <a class="mm-menu__link" href="#" data-src="/special/imp_person_show" data-title="重点人">
                <span class="mm-menu__link-text"><i class="fa fa-users fa-fw"></i> 重&nbsp;点&nbsp;人</span>
            </a>
        </li>
        <li class="mm-menu__item">
            <a class="mm-menu__link" href="#" data-src="/special/imp_location_show" data-title="重点地点">
                <span class="mm-menu__link-text"><i class=" fa fa-map-marker fa-fw "></i> 重点地点</span>
            </a>
        </li>
        <li class="mm-menu__item">
            <a class="mm-menu__link" href="#" data-src="/special/imp_organization_show" data-title="重点组织">
                <span class="mm-menu__link-text"><i class="fa fa-tasks fa-fw"></i> 重点组织</span>
            </a>
        </li>
    </ul>
</nav><!-- /nav -->

<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script src="/static/js/special/materialMenu.min.js"></script>
<script type="text/javascript" src="/static/js/special/dat.gui.min.js"></script>
<script type="text/javascript" src="/static/js/special/index.js"></script>
<script>
    //创建并使用对象 另一边完全用于解决产生这个对象，且是一载入文档就产生
    var menu = new Menu;

    $("ul li a").click(function(){
        var aurl = $(this).attr("data-src");

        $("iframe").attr("src",aurl);

        $("#mm-menu-toggle").click();


    });

    function loading(){
        setTimeout(function () {
            $("#loading").hide();
            $("#rocketwagon-canvas").hide();
        }, 2000);
    }


    window.onload = loading();

</script>
</body>

</html>